<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title>基于AngularJS和SVG技术的图表组件</title>
	<link href="./framework/zui-1.4.0/css/zui.css" rel="stylesheet">
	<link rel="stylesheet" href="./framework/colorpicker/css/colorpicker.css" type="text/css" />
	<link rel="stylesheet" media="screen" type="text/css" href="./framework/colorpicker/css/layout.css" />
	<style type="text/css">
	   rect:hover{
	       opacity:0.7;
           cursor:pointer;
	   }
	</style>
</head>

<body style="width:1808px;font-family: 'YaHei Consolas Hybrid';" ng-app="myApp" ng-controller="controller2 as ctrl">

    <div class="row">
        <div class="col-md-1"></div>
        <div class="col-md-10" style="text-align: center;"><h1>基于AngularJS和SVG技术的图表组件</h1></div>
        <div class="col-md-1"></div>
    </div>

    <div class="row" style="margin-bottom: 5px;">
        <div class="col-md-1"></div>
        <div class="col-md-10" style="height: 42px;">
            <nav class="navbar navbar-default" role="navigation">
                <ul class="nav navbar-nav nav-justified">
                  <li><a href="./index.html">二维线性图</a></li>
                  <li class="active"><a href="./index2.html">二维柱状图</a></li>
                  <li><a href="./index3.html">二维饼状图</a></li>
                </ul>
            </nav>
        </div>
        <div class="col-md-1"></div>
    </div>
    
    <div class="row" style="padding-bottom: 5px;">
        <div class="col-md-1"></div>
        <div class="col-md-10">
            <button  id='editorBtn' type="button" class="btn btn-mini" onclick="editTitle()"style="float: right;">编辑图表标题</button>
            <div id="chartTitle">图表标题</div>
            <div id='editorDiv' style="display: none;">
            <textarea id='editor' name='content' style='width:100%;'>图表标题</textarea>
            <button style="float: right;" type="button" class="btn btn-mini" onclick="editTitleSubmit()">确认编辑</button>
            </div>
        </div>
        <div class="col-md-1"></div>
    </div>
    
    <div class="row">
        <div class="col-md-1" style="height: 500px;">
            <div id="yDivLabel" style="display: none;">
		        <div id="yLabelsUl" class="list-group" style="cursor: pointer;margin-right: -20px;text-align: center;">
		            <a onclick="editYLi(this)" style="height: 50.9px;line-height: 31px;" class="list-group-item">10%</a>
		            <a onclick="editYLi(this)" style="height: 50.9px;line-height: 31px;" class="list-group-item">20%</a>
					<a onclick="editYLi(this)" style="height: 50.9px;line-height: 31px;" class="list-group-item">30%</a>
					<a onclick="editYLi(this)" style="height: 50.9px;line-height: 31px;" class="list-group-item">40%</a>
					<a onclick="editYLi(this)" style="height: 50.9px;line-height: 31px;" class="list-group-item">50%</a>
					<a onclick="editYLi(this)" style="height: 50.9px;line-height: 31px;" class="list-group-item">60%</a>
					<a onclick="editYLi(this)" style="height: 50.9px;line-height: 31px;" class="list-group-item">70%</a>
					<a onclick="editYLi(this)" style="height: 50.9px;line-height: 31px;" class="list-group-item">80%</a>
					<a onclick="editYLi(this)" style="height: 50.9px;line-height: 31px;" class="list-group-item">90%</a>
					<a onclick="editYLi(this)" style="height: 50.9px;line-height: 31px;" class="list-group-item">100%</a>
				</div>
			</div>
		</div>
        <div class="col-md-10">
            <svg style="height:500px;width:100%;" version='1.1' xmlns='http://www.w3.org/2000/svg'>
                <a style="text-decoration:none;" ng-repeat="b in ctrl.bars">
                    <a ng-bind="parentIndex=$index"></a>
                    <text ng-if="b[4]=='1'" ng-repeat="i in b[0]" x="{{$index*ctrl.xScale*1500/ctrl.xRange+parentIndex*ctrl.xScale*1500/ctrl.xRange/(ctrl.barCount+1)+ctrl.xScale*1500/ctrl.xRange/(ctrl.barCount+1)/3}}" y="{{500-i[1]*500/ctrl.yRange-5}}" font-size="10" >{{i[1]}}</text>
                    <rect ng-repeat="i in b[0]" x="{{$index*ctrl.xScale*1500/ctrl.xRange+parentIndex*ctrl.xScale*1500/ctrl.xRange/(ctrl.barCount+1)+(ctrl.xScale*1500/ctrl.xRange/(ctrl.barCount+1))*0.1451612903}}" y="{{500-i[1]*500/ctrl.yRange}}" width="{{ctrl.xScale*1500/ctrl.xRange/(ctrl.barCount+1)-(ctrl.xScale*1500/ctrl.xRange/(ctrl.barCount+1))*0.1451612903*2}}" height="{{i[1]*500/ctrl.yRange}}" style="fill:{{b[1]}};"/> 
                </a>  
                <text x="20" y="484" font-size="20">0</text>
                <text id="xSVGLabel" x="1362" y="470" font-size="20">X/{{ctrl.xUnit}}</text>
                <text x="30" y="20" font-size="20">Y/{{ctrl.yUnit}}</text>
                <line x1='0' y1='500' x2='100%' y2='500' style='stroke:black;stroke-width:1'/>
                <line x1='0' y1='0' x2='0' y2='100%' style='stroke:black;stroke-width:1'/>
                <a id="xSVGScale" style="text-decoration:none;display: none;">
                    <line ng-repeat="i in ctrl.xScalesData" x1='{{i/ctrl.xRange*1500}}' y1='500' x2='{{i/ctrl.xRange*1500}}' y2='490' style='stroke:black;stroke-width:1'/>
                    <text ng-repeat="i in ctrl.xScalesData" x="{{i/ctrl.xRange*1500+2}}" y="498" font-size="10">{{i}}</text>
                </a>
                <a id="ySVGScale" style="text-decoration:none;">
	                <line ng-repeat="i in ctrl.yScalesData" x1='0' y1='{{500-i/ctrl.yRange*500}}' x2='10' y2='{{500-i/ctrl.yRange*500}}' style='stroke:black;stroke-width:1'/>                    
	                <text ng-repeat="i in ctrl.yScalesData" x="0" y="{{500-i/ctrl.yRange*500-2}}" font-size="10">{{i}}</text>
                </a>
            </svg>
        </div>
        <div class="col-md-1"></div>
    </div>

	<div id="xDivLabel" style="display:;">
		<div class="row">
			<div class="col-md-1"></div>
			<div class="col-md-10">
				<ul id="xLabelsUl" class="nav nav-primary nav-justified" style="cursor:pointer;">
					<li onclick="editXLi(this)"><a>1月</a></li>
					<li onclick="editXLi(this)"><a>2月</a></li>
					<li onclick="editXLi(this)"><a>3月</a></li>
					<li onclick="editXLi(this)"><a>4月</a></li>
					<li onclick="editXLi(this)"><a>5月</a></li>
					<li onclick="editXLi(this)"><a>6月</a></li>
					<li onclick="editXLi(this)"><a>7月</a></li>
					<li onclick="editXLi(this)"><a>8月</a></li>
					<li onclick="editXLi(this)"><a>9月</a></li>
					<li onclick="editXLi(this)"><a>10月</a></li>
					<li onclick="editXLi(this)"><a>11月</a></li>
					<li onclick="editXLi(this)"><a>12月</a></li>
				</ul>
			</div>
			<div class="col-md-1"></div>
		</div>
	</div>

    <div class="row" style="padding-bottom: 5px;padding-top: 5px;">
       <div class="col-md-1"></div>
       <div class="col-md-10">
           <button ng-click="ctrl.showDemo()" type="button" class="btn btn-mini btn-success"style="float: right;margin-left: 5px;">演示数据</button>
           <div style="float: left;margin-top: 5px;">数据柱组名：</div><input class="form-control" type="text" ng-model="ctrl.groupName" style="width:200px;float: left;">
           <div id="yLabelButtons" style="display: none;">
               <button onclick="addYLabel()" type="button" class="btn btn-mini"style="float: right;">&nbsp;&nbsp;&nbsp;+&nbsp;&nbsp;&nbsp;</button>
               <button onclick="deleteYLabel()" type="button" class="btn btn-mini"style="float: right;">&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;</button>
               <div style="float:right;">&nbsp;Y轴标签数量：&nbsp;</div>
           </div>
           <button onclick="changeYLabelType(this)" type="button" class="btn btn-mini"style="float: right;margin-left: 5px;">显示Y轴标签</button>
           <div id="xLabelButtons" style="display:;">
               <button onclick="addXLabel()" type="button" class="btn btn-mini"style="float: right;">&nbsp;&nbsp;&nbsp;+&nbsp;&nbsp;&nbsp;</button>
               <button onclick="deleteXLabel()" type="button" class="btn btn-mini"style="float: right;">&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;</button>
               <div style="float:right;">&nbsp;X轴标签数量：&nbsp;</div>
           </div>
           <button onclick="changeXScaleType(this)" type="button" class="btn btn-mini"style="float: right;">显示X轴刻度</button>
           <button onclick="changeXLabelType(this)" type="button" class="btn btn-mini"style="float: right;margin-right: 5px;">隐藏X轴标签</button>
           <button type="button" class="btn btn-mini" data-backdrop="false" data-moveable="true" data-toggle="modal" data-target="#axisEditor" style="float: right;margin-right: 5px;">编辑坐标轴</button>
       </div>
       <div class="col-md-1"></div>
    </div>

	<div class="row" style="padding-bottom: 5px;padding-top: 5px;">
	   <div class="col-md-1"></div>
       <div class="col-md-10">
           已添加的数据(x,y)：<span ng-repeat="i in ctrl.bars[ctrl.barCount][3]" class="label label-badge label-info">{{i}}</span>
       </div>
       <div class="col-md-1"></div>
    </div>
        
    <div class="row" style="padding-bottom: 5px;">
        <div class="col-md-1"></div>
        <div class="col-md-10">
            <div style="float: left;margin-top: 5px;">添加数据：请输入处于X轴标签&nbsp;<label>{{ctrl.x}}</label>&nbsp;处的数据值：</div>
            <input class="form-control" type="text" ng-model="ctrl.y" style="width:50px;float: left;text-align: center;">
            <div style="float: left;margin-left: 5px;"><button class="btn" ng-click="ctrl.addBar()">添加</button></div>
        </div>
        <div class="col-md-1"></div>
    </div>
	            
    <div class="row" style="padding-bottom: 5px;">
        <div class="col-md-1"></div>
        <div class="col-md-10">
            <div style="float: left;">
                当前数据柱组颜色：<label>{{ctrl.color}}</label>，更改为：
                <button ng-click="ctrl.changeColor('blue')" class="btn btn-primary">blue</button>
                <button ng-click="ctrl.changeColor('cyan')" class="btn btn-info">cyan</button>
                <button ng-click="ctrl.changeColor('green')" class="btn btn-success">green</button>
                <button ng-click="ctrl.changeColor('orange')" class="btn btn-warning">orange</button>
                <button ng-click="ctrl.changeColor('red')" class="btn btn-danger">red</button>
                其它：
            </div>
            <div id="colorSelector"><div style="background-color: blue;"></div></div>
            <button ng-click="ctrl.changeColor('other')" class="btn" style="margin-left: 5px;">确认选择</button>
        </div>
        <div class="col-md-1"></div>
    </div>
    
    <div class="row" style="padding-bottom: 5px;">
        <div class="col-md-1"></div>
        <div class="col-md-10">
            是否显示数据柱数据：<label>{{ctrl.showPointsData}}</label>，
            <button ng-click="ctrl.changePointsData()" class="btn">更改</button>
        </div>
        <div class="col-md-1"></div>
    </div>

	<div class="row" style="padding-bottom: 5px;">
	   <div class="col-md-1"></div>
        <div class="col-md-10">
            <button style="float:right;" class="btn btn-lg btn-primary" ng-click="ctrl.nextGroup()">绘制下一组数据</button>
            <button style="float:right;margin-right: 5px;" type="button" class="btn btn-lg" data-backdrop="false" data-moveable="true" data-toggle="modal" data-target="#legends">查看图例</button>
        </div>
        <div class="col-md-1"></div>
    </div>

    <!-- 编辑坐标轴对话框，不点按钮时不会显示 -->
    <div id="axisEditor" class="modal fade">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">编辑坐标轴</h3>
                </div>
                <div class="modal-body">
                    <div style="float:left;margin-top: 5px;">X轴显示范围：</div><input type="text" ng-blur="ctrl.calcXCount()" ng-model="ctrl.xRange" class="form-control" style='width:auto;text-align:center;float:right;'>
                    <br/>
                    <br/>
                    <div style="float:left;margin-top: 5px;">Y轴显示范围：</div><input type="text" ng-blur="ctrl.calcYCount()" ng-model="ctrl.yRange" class="form-control" style='width:auto;text-align:center;float:right;'>
                    <br/>
                    <br/>
                    <div style="float:left;margin-top: 5px;">X轴刻度：</div><input type="text" ng-blur="ctrl.calcXCount()" ng-model="ctrl.xScale" class="form-control" style='width:auto;text-align:center;float:right;'>
                    <br/>
                    <br/>
                    <div style="float:left;margin-top: 5px;">X轴分为：</div><div style="float:right;margin-top: 5px;margin-left: 10px;">份</div><input type="text" ng-blur="ctrl.calcXScale()" ng-model="ctrl.xCount" class="form-control" style='width:auto;text-align:center;float:right;'>
                    <br/>
                    <br/>
                    <div style="float:left;margin-top: 5px;">Y轴刻度：</div><input type="text" ng-blur="ctrl.calcYCount()" ng-model="ctrl.yScale" class="form-control" style='width:auto;text-align:center;float:right;'>
                    <br/>
                    <br/>
                    <div style="float:left;margin-top: 5px;">Y轴分为：</div><div style="float:right;margin-top: 5px;margin-left: 10px;">份</div><input type="text" ng-blur="ctrl.calcYScale()" ng-model="ctrl.yCount" class="form-control" style='width:auto;text-align:center;float:right;'>
                    <br/>
                    <br/>
                    <div style="float:left;margin-top: 5px;">X轴单位：</div><input type="text" ng-model="ctrl.xUnit" class="form-control" style='width:auto;text-align:center;float:right;'>
                    <br/>
                    <br/>
                    <div style="float:left;margin-top: 5px;">Y轴单位：</div><input type="text" ng-model="ctrl.yUnit" class="form-control" style='width:auto;text-align:center;float:right;'>
                    <br/>
                    <br/>
                </div>
                <div class="modal-footer">
                    <button ng-click="ctrl.changeRange()" type="button" class="btn btn-primary" data-dismiss="modal">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 图例对话框，不点按钮时不会显示 -->
	<div id="legends" class="modal fade">
		<div class="modal-dialog modal-sm">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span><span class="sr-only">关闭</span>
					</button>
					<h3 class="modal-title">图例</h3>
				</div>
				<div class="modal-body">
					<div class="list-group">
						<a ng-repeat="i in ctrl.bars" href="#" class="list-group-item" style="height:70px;">
						    <h4>{{i[2]}}:颜色{{i[1]}}</h4>
			                <svg style="height:100%;width:100%;" version='1.1' xmlns='http://www.w3.org/2000/svg'>
			                    <line x1='0' y1='0' x2='100%' y2='0' style="fill:none;stroke:{{i[1]}};stroke-width:5"/>
			                </svg>
						</a>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				</div>
			</div>
		</div>
	</div>

	<script src="./framework/jquery-1.12.0.min.js"></script>
    <script src="./framework/zui-1.4.0/js/zui.js"></script>
    <script src="./framework/angular-1.3.9/angular.min.js"></script>
    <script type="text/javascript" src="./framework/colorpicker/js/colorpicker.js"></script>
    <script type="text/javascript" src="./framework/colorpicker/js/eye.js"></script>
    <script type="text/javascript" src="./framework/colorpicker/js/utils.js"></script>
    <script charset="utf-8" src="./framework/kindeditor-4.1.10/kindeditor.js"></script>
    <script charset="utf-8" src="./framework/kindeditor-4.1.10/lang/zh_CN.js"></script>    
    <script src="./js/app.js"></script>  
    <script src="./js/controllers.js"></script>
    
</body>
</html>